<%@ include file="common.jspf" %>
<%@ include file="header.jspf" %>
  
<div class="container">
	<h3>
		<span id="category" class="label label-default">Default</span> 
		<span id="title"></span> 
		<small><span id="dateCreated"></span> by Dale</small>
	</h3>
	<div class="alert alert-success" role="alert"><span id="url"></span></div>
	<pre class="pre-scrollable"><span id="content"></span></pre>
	<div class="form-group pull-right">
		<button id="btnList" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-list"></span> List
		</button>
		<button id="btnCreate" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-pencil"></span> Create
		</button>
		<button id="btnModify" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-edit"></span> Modify
		</button>
		<button id="btnRemove" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-remove"></span> Remove
		</button>
	</div>
</div>

<script>
	$(function() {
		initData();
		initEvents();
	});
	
	function initData() {
		$.getJSON('${urlFind}', {no: '${param.no}'})
		.done(function(data) {
			data.dateCreated = moment(data.dateCreated).format("YYYY-MM-DD");
			$('#aUrl').attr('href', data.url);
			$.each(['category', 'title', 'dateCreated', 'content', 'url'], function(idx, val) {
				$('#' + val).text(data[val])
			});
		})
		.fail(function(data) {
			handleFailure(data);
		});
	}

	function initEvents() {
		$('#btnList').click(function() {
			list();
		});
		$('#btnCreate').click(function() {
			edit();
		});
		$('#btnModify').click(function() {
			edit('${param.no}');
		});
		$('#btnRemove').click(function() {
			remove('${param.no}');
		});
		$('#url').click(function() {
			link($(this).text());
			countUp('${param.no}');
		});
	}
</script>

<%@ include file="footer.jspf" %>